<template>
  <el-card :body-style="{ padding: '8px 18px' }">
    <div slot="header" class="me-category-header">
      <span class="text">最热分类</span>
    </div>

    <ul class="me-category-list">
      <li
        class="me-category-item"
        v-for="(category, index) in categories"
        :key="index"
      >
        <p class="info text">
          <a @click="changeCate(category.id)"
            ><i :class="category.avatar" class="icon"></i>
            {{ category.categoryname }}
          </a>
        </p>
      </li>
    </ul>
  </el-card>
</template>

<script>
export default {
  name: 'CardCategory',
  data() {
    return {
      categories: {},
    }
  },
  methods: {
    changeCate(id) {
      this.$emit('getHotData', id)
    },
  },
  created() {
    var _this = this
    this.$axios
      .get('/category')
      .then((result) => {
        _this.categories = result.data.data
      })
      .catch((err) => {})
  },
}
</script>

<style scoped>
.icon {
  margin-right: 20px;
  margin-left: 100px;
}
.me-category-header {
  font-weight: 600;
}

.me-category-list {
  list-style-type: none;
}

.me-category-item {
  padding: 4px;
  font-size: 14px;
  color: #5fb878;
}
a {
  text-decoration: none;
}
.info {
  height: 30px;
  line-height: 30px;
  font-size: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.me-category-item a:hover {
  text-decoration: underline;
}
.text {
  background-image: -webkit-linear-gradient(
    left,
    blue,
    #66ffff 10%,
    #cc00ff 20%,
    #cc00cc 30%,
    #ccccff 40%,
    #00ffff 50%,
    #ccccff 60%,
    #cc00cc 70%,
    #cc00ff 80%,
    #66ffff 90%,
    blue 100%
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-background-size: 200% 100%;
  -webkit-animation: masked-animation 4s linear infinite;
}
@keyframes masked-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}
</style>
